<template>
	<!-- 推荐组件 -->
	<view>
		<!-- 轮播图 -->
		<view class="re-swiper">
			<u-swiper
			:list="swiperList"
			indicator
			indicatorMode="line"
			circular
			height="308rpx"
			></u-swiper>
		</view>
		<!-- 新上好课 -->
		<view class="re-new">
			<view class="new-title">
				<view class="new-title-name">
					新上好课
				</view>
				<view class="new-title-more">
					查看更多
				</view>
			</view>
			<!-- 课程列表 -->
			<view class="new-list">
				<view 
				class="new-list-item" 
				v-for=" item in newList"
				@click="toDetail(item.id)"
				>
					<view class="list-item-img">
						<img :src="item.courseCover" alt="" />
					</view>
					<view class="list-item-info">
						<view class="info-title">
							{{ item.courseName }}
						</view>
						<view class="info-type">
							{{ courseType(item.courseLevel) }}
						</view>
						<view class="info-detail">
							<view class="info-detail-price" v-if="item.discountPrice == 0">
								<view class="">
									免费
								</view>
							</view>
							<view class="info-detail-price" v-else>
								<view>
									限时优惠
								</view>
								<view>
									￥ {{ item.discountPrice }}
								</view>
							</view>
							<view class="info-detail-count">
								{{ courseNumber(item.clicks) }}人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 推荐好课 -->
		<view class="recommend">
			<view class="new-title">
				<view class="new-title-name">
					推荐好课
				</view>
				<view class="new-title-more">
					查看更多
				</view>
			</view>
			<view class="">
				<!-- uniapp自带的scroll组件 -->
				<scroll-view scroll-x="true" class="nav-bar">
					<view class="nav-bar-wrap">
						<!-- 无意义的空白标签 -->
						<block v-for="(item,index) in hotList" :key='index'>
							<view class="nav-bar-item">
								<view class="nav-bar-item-img">
									<img :src="item.courseCover" alt="" />
								</view>
								<view class="nav-bar-item-info">
									<view class="nav-bar-item-level">{{ courseType(item.courseLevel) }}·{{ courseNumber(item.purchaseCounter) }}人报名</view>
									<view class="nav-bar-item-price" v-if="item.discountPrice == 0">
										<view class="nav-bar-item-nowPrice">
											免费
										</view>
									</view>
									<view class="nav-bar-item-price" v-else>
										<view class="nav-bar-item-nowPrice">￥ {{ item.discountPrice }}</view>
										<view class="nav-bar-item-originPrice">￥ {{ item.salePrice }}</view>
									</view>
									<view class="nav-bar-item-flag">限时优惠</view>
								</view>
							</view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 大家都在看 -->
		<view class="re-all">
			<view class="new-title">
				<view class="new-title-name">
					大家都在看
				</view>
			</view>
			<!-- 课程列表 -->
			<view class="new-list">
				<view class="new-list-item" v-for=" item in courseList">
					<view class="list-item-img">
						<img :src="item.courseCover" mode=""></img>
					</view>
					<view class="list-item-info">
						<view class="info-title">
							{{ item.courseName }}
						</view>
						<view class="info-type">
							{{ courseType(item.courseLevel) }}
						</view>
						<view class="info-detail">
							<view class="info-detail-price" v-if="item.salePrice == 0">
									免费
							</view>
							<view class="info-detail-price" v-else>
								<view>
									限时优惠
								</view>
								<view>
									￥ {{ item.salePrice }}
								</view>
							</view>
							<view class="info-detail-count">
								{{ courseNumber(item.clicks) }}人学习
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	// 引入api
	import { getSliders } from '../../api/home.js'
	import { getMostNew,getMostHot,getCourse } from '../../api/course.js'
	// 使用混入
	import { mixins } from '../../mixins/mixins.js'
	
	export default {
		// 挂在到这个组件上,然后可以在template中直接使用这个方法，如：<view class="nav-bar-item-level">{courseType(item.courseType)}·187人报名</view>
		// 观看人数数字转万
		// courseNumber(number)
		mixins:[mixins],
		props:{
			courseList:{
				type:Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				swiperList:[],
				newList:[],
				hotList:[],
			}
		},
		mounted() {
			// 获取轮播图图片
			getSliders().then(res => {
				this.swiperList = res.list.map(item => item.imageUrl)
			})
			// 获取新上好课 由于接口数据需要token暂时无法获取到服务器的数据
			getMostNew({
				pageNum:1,
				pageSize:3
			}).then(res => {
				this.newList = res.pageInfo.list
			})
			// 获取热课 由于接口数据需要token暂时无法获取到服务器的数据
			getMostHot({
				pageNum:1,
				pageSize:6
			}).then(res => {
				this.hotList = res.pageInfo.list
			})
		},
		methods:{
			toDetail(id) {
				uni.navigateTo({
					url:`/pages/detail/detail?id=${id}`
				})
			}
		}
	}
</script>

<style>
	/* 轮播图指示器 */
/deep/ .u-swiper__indicator {
		right: 20rpx;
	}
	/* 轮播图样式 */
	.re-swiper {
		padding: 14rpx;
	}
	/* 上新好课css样式 */
	.new-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 14rpx;
	}
	.new-title-name {
		font-size: 40rpx;
		font-weight: 400;
		color:#333;
	}
	.new-title-more {
		font-size: 26rpx;
		font-weight: 400;
		color:#A0A4AD;
	}
	.new-list-item {
		display: flex;
		align-items: center;
		position: relative;
		margin-top: 40rpx;
		padding: 14rpx;
	}
	.new-list-item:first-child {
		margin-top: 20rpx;
	}
	.new-list-item::after {
		content: '';
		position: absolute;
		border-bottom: 1px solid #000;
		width: 100%;
		bottom: -20rpx;
		margin-top: 20rpx;
		opacity: 0.15;
	}
	.list-item-img img {
		width: 237rpx;
		height: 186rpx;
		border-radius: 12rpx;
		background-color: #ccc;
	}
	.list-item-info {
		display: flex;
		flex-direction: column;
		height: 186rpx;
		width: 100%;
		padding-left: 23rpx;
		justify-content: space-between;
	}
	.info-title {
		font-size: 29rpx;
		color: #191919;
		font-weight: 400;
	}
	.info-type {
		font-size: 24rpx;
		color: #c5c5c5;
		font-weight: 400;
	}
	.info-detail {
		display: flex;
		justify-content: space-between;
	}
	.info-detail-price {
		display: flex;
		color: #FF4B5C;
		font-size: 21rpx;
		font-weight: 600;
	}
	.info-detail-count {
		font-size: 21rpx;
		font-weight: 400;
		color: #A0A4AD;
		justify-content: space-between;
	}
	/* 推荐好课css样式 */
	.recommend {
		padding-top: 20rpx;
	}
	/* 去除scrollbar底部的滚动条 */
	/deep/ ::-webkit-scrollbar {
		display: none;
	}
	/* 列表盒子样式 */
	.nav-bar-wrap {
		display: flex;
		flex-flow: column wrap;
		height: 634rpx;
	}
	/* 列表内每个盒子样式 */
	.nav-bar-item {
		width: 265rpx;
		height: 286rpx;
		background: rgba(255,255,255,0.39);
		box-shadow: 1rpx 3rpx 3rpx rgba(27,39,94,0.1);
		border-radius: 12rpx;
		margin-top: 28rpx;
		margin-left: 17rpx;
	}
	.nav-bar-item-img img {
		width: 265rpx;
		height: 160rpx;
		border-radius: 12rpx;
		background-color: pink;
	}
	.nav-bar-item-info {
		padding: 14rpx;
	}
	.nav-bar-item-flag {
		font-size: 19rpx;
		color: #FF6464;
	}
	.nav-bar-item-level {
		font-size: 21rpx;
		color: #7B7B7B;
	}
	.nav-bar-item-price {
		display: flex;
		align-items: center;
		padding: 4rpx 0;
	}
	.nav-bar-item-originPrice {
		font-size: 18rpx;
		text-decoration-line: line-through;
		margin-left: 25rpx;
	}
	.nav-bar-item-nowPrice {
		font-size: 22rpx;
		font-weight: 500;
		color:#FF0018;
	}
	/* 大家都在看样式 */
	
</style>